<!--
 * @Author: hifishroom
 * @Date: 2021-08-27 17:40:49
 * @LastEditTime: 2021-08-28 14:40:24
 * @FilePath: \backstage\src\views\login\Login.vue
-->
<template>
  <div class="padding-top mar-top flex flex-center login-content">
    <div class="flex login-box flex-center">
      <div class="aaa">
        <div class="login-left">
          <img
            class="login-img"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.51wendang.com%2Fpic%2F1ee11f561c1907f47cdaf5c7%2F1-352-png_6_0_0_0_0_0_0_1080_607.5-1080-0-2031-1080.jpg&refer=http%3A%2F%2Fwww.51wendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632450403&t=97ca14e2dd4fdf7179940634f4437b1d"
            alt=""
          />
        </div>
        <div class="login">
          <h2>后台管理登录</h2>
          <form>
            <div class="user-box">
              <input type="text" name="" required="" v-model="userNumber" />
              <label>账号</label>
            </div>
            <div class="user-box">
              <input type="text" name="" required="" v-model="password" />
              <label>密码</label>
            </div>
            <a href="javascript:;" @click="loginClick">
              登录
            </a>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  components: {},
  name: "Login",
  data() {
    return {
      userNumber: "",
      password: ""
    };
  },
  methods: {
    ...mapActions(["rqsLogin"]),
    loginClick() {
      // this.rqsLogin({ userNumber: this.userNumber, password: this.password });
      let _this = this;
      if(this.userNumber === '' || this.password === ''){
        alert('账号或密码不能为空');
      }else{
        this.rqsLogin({ userNumber: this.userNumber, password: this.password });
      }
    }
  }
};
</script>

<style lang="scss">
.login {
  --bgc: #03e9f4;
  width: 400px;
  height: 400px;
  padding: 40px;
  background-color: #beb9b94f;
  border-radius: 10px;
  box-shadow: 0 15px 25px rgba(218, 209, 209, 0.6);
  margin-left: 40%;
  z-index: 3;
}

.login-content {
  height: 100vh;
}

.login-box {
  width: 1200px;
  border-radius: 10px;
  overflow: hidden;
}

.aaa {
  display: flex;
  width: 1200px;
  justify-content: space-between;
}

.login h2 {
  margin-bottom: 30px;
  text-align: center;
  color: rgb(58, 202, 228);
}
.user-box {
  position: relative;
  color: #fff;
}
.user-box input {
  width: 100%;
  padding: 10px 0;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  pointer-events: none;
  font-size: 16px;
  transition: 0.5s;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: var(--bgc);
  font-size: 12px;
}

.login form a {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  margin: 40px 0 0 90px;
  color: var(--bgc);
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  text-indent: 2.3em;
  letter-spacing: 40px;
}
.login form a:hover {
  background-color: var(--bgc);
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px var(--bgc), 0 0 25px var(--bgc), 0 0 50px var(--bgc),
    0 0 100px var(--bgc);
}

.login-left {
  width: 474px;
  height: 400px;
  position: absolute;
  z-index: 1;
  border-radius: 15px;
  overflow: hidden;
}

.login-img {
  height: 400px;
}
</style>
